import React, { useState } from 'react'
import './mine.less'
export default function Mine(props) {
    const [data] = useState([
        {
            title: '收藏',
            icon: '#icon-shoucang1'
        },
        {
            title: '朋友圈',
            icon: '#icon-beijingtupian'
        },
        {
            title: '卡包',
            icon: '#icon-kabao'
        },
        {
            title: '表情',
            icon: '#icon-biaoqing'
        },
    ])

    function toPersonal() {
        props.history.push('personal')
    }
    function skip(index) {
        function handleA() {//收藏
            props.history.push('collect')
        }
        function handleB() {//朋友圈
            props.history.push('collect')
        }
        function handleC() {//卡包
            props.history.push('collect')
        }
        function handleD() {//表情
            props.history.push('collect')
        }

        let enums = new Map([
            [0, handleA],
            [1, handleB],
            [2, handleC],
            [3, handleD],
        ])
        let handleType = enums.get(index)
        handleType()
    }
    return (
        <div className='mineBox'>
            <div className='mine_top' >
                <div className='Img_box' onClick={toPersonal}>
                    <img src="https://pic3.zhimg.com/80/v2-437f4dc41f0f972f31921a228641cf9e_720w.jpg?source=1940ef5c" alt='' />
                </div>
                <div className='contentBox'>
                    <div className='userName' onClick={toPersonal}>福霖🤔</div>
                    <div className='userCode' onClick={toPersonal}>
                        <div>微信号：1269030073</div>
                        <div className='iconBox'>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-erweima"></use>
                                </svg>
                            </span>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div className='more'>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-jia"></use>
                                </svg>
                            </span>
                            <span>状态</span>
                        </div>
                        <div>
                            <span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-gengduo"></use>
                                </svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div className='zifu' onClick={() => {
                props.history.push('payment')
            }}>
                <div>
                    <span className='iconFont'>
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref="#icon-weixinzhifu1"></use>
                        </svg>
                    </span>
                </div>
                <div className='iconRight'>
                    <span className='fontSize'>支付</span>
                    <svg className="icon" aria-hidden="true">
                        <use xlinkHref="#icon-arrow-right"></use>
                    </svg>
                </div>
            </div>
            <div>
                {
                    data.map((item, index) => {
                        return <div className='YY' key={index} onClick={() => {
                            skip(index)
                        }}>
                            <div>
                                <span className='iconFont'>
                                    <svg className="icon" aria-hidden="true">
                                        <use xlinkHref={item.icon}></use>
                                    </svg>
                                </span>
                            </div>
                            <div className='iconRight'>
                                <span className='fontSize'>{item.title}</span>
                                <svg className="icon" aria-hidden="true">
                                    <use xlinkHref="#icon-arrow-right"></use>
                                </svg>
                            </div>
                        </div>
                    })
                }
            </div>
            <div className='zifu'>
                <div>
                    <span className='iconFont'>
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref="#icon-shezhixitongshezhigongnengshezhishuxing-xian"></use>
                        </svg>
                    </span>
                </div>
                <div className='iconRight' onClick={() => {
                    props.history.push('set')
                }}>
                    <span className='fontSize'>设置</span>
                    <svg className="icon" aria-hidden="true">
                        <use xlinkHref="#icon-arrow-right"></use>
                    </svg>
                </div>
            </div>
        </div>
    )
}
